<template>
  <div>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-container>
        <el-main>
          <TopFilter :list="topFilterList" @resetChange="resetChange" :cols="3" @filterChange="changeHandle"></TopFilter>

          <FilterTable
            ref="table"
            :columns="columns"
            :fetchapi="fetchApi"
            :params="fetchParams"
            :datakey="'records'"
            :onRowSelectChange="selectChangeHandle"
            :onColumnsChange="columns => (this.columns = columns)"
            :selectionType="'single'"
          >
          </FilterTable>
          <div
            :style="{
              position: 'absolute',
              left: 0,
              bottom: 0,
              right: 0,
              zIndex: 9,
              borderTop: '1px solid #e9e9e9',
              padding: '10px 20px',
              background: '#fff',
              textAlign: 'right'
            }"
          >
            <el-button @click="closeDrawer(1)">取 消</el-button>
            <el-button @click="closeDrawer(2)" type="primary" :disabled="isDisabled">确 定</el-button>
          </div>

          <!-- <FormPanel ref="from" :list="formList" :data="dealerInfo" @formChange="changeHandle" :isSubmitBtn="false" :collapse="false" :labelWidth="190"></FormPanel> -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import moment from 'moment';
import { queryCarListSideC, getProductBrandTree, listColor, queryAllOption, queryAllPackage } from '@/api/dealerSale/salesPlan/MonthPlanReport';
import {
  getBrandListOEM,
  getSeriesListOEM,
  getModelListOEM,
  getPackageListOEM,
  getOptionListDictOEM,
  getWcolorList,
  getIcolorList,
} from '@/api/common/cars/masterDataCars';
export default {
  data() {
    return {
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchApi: queryCarListSideC,
      // fetchParams: {
      //   dealerCode: this.dealerData.dealerCode
      // },
      fetchParams: {
        templateStatus: 60231002,
        templateYearAndMonth: moment().format('YYYY-MM'),
        isDealer: 1
      },
      saveData: [],
      isDisabled: true,
      carList: [],
      defaultProps: {
        children: 'child',
        label: 'label'
      },
      dealerInfo: {},
      addressDTO: [],
      accountTypeList: []
    };
  },
  props: ['dealerData'],
  // mixins: [dictionary],
  created() {
    this.getvehicleList();
    this.getListColor();
    this.getAllOption();
    this.getAllPackage();
    this.getDictBrandList();
    this.getColors();
    this.getIColors();
  },
  methods: {
    resetChange(params) {
 
      this.topFilterList.find((item) => item.fieldName === 'seriesId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'seriesId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'modelId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'modelId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'packageId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
      const str = this.topFilterList.find(x => x.fieldName == 'configId');
 
      this.$refs.TopFilter.RESET_FORM();
      this.fetchParams = Object.assign({}, this.fetchParams, params);
    },
    handleNodeClick(val) {
 
    },
    async getDictBrandList() {
      const res = await getBrandListOEM();
      if (res.resultCode === 200) {
 
        this.topFilterList.find((item) => item.fieldName === 'brandId').itemList = res.data.map((x) => ({ value: x.brandId, text: x.brandName }));
        // this.topFilterList = [...this.topFilterList]
      }
    },
    async changeBrandSelect(brandsid) {
      // if (!brandsid) {
      this.topFilterList.find((item) => item.fieldName === 'seriesId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'seriesId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'modelId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'modelId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'packageId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
      // } else {
      if (brandsid) {
        const res = await getSeriesListOEM(brandsid);
        if (res.resultCode === 200) {
          this.topFilterList.find((item) => item.fieldName === 'seriesId').itemList = res.data.map((x) => ({ value: x.seriesId, text: x.seriesName }));
        }
      }
    },
    async changeSeriesSelect(seriessid) {
      const brandsid = this.topFilterList.find((item) => item.fieldName === 'brandId').initialValue;
      /* if (!brandsid || !seriessid) {
        this.topFilterList.find(item=>item.fieldName==='modelId').initialValue = '';
        this.topFilterList.find(item=>item.fieldName==='modelId').itemList = [];
        this.topFilterList.find(item=>item.fieldName==='packageId').initialValue = '';
        this.topFilterList.find(item=>item.fieldName==='packageId').itemList = [];
      } else { */
      if (brandsid && seriessid) {
        this.topFilterList.find((item) => item.fieldName === 'modelId').initialValue = '';
        this.topFilterList.find((item) => item.fieldName === 'modelId').itemList = [];
        this.topFilterList.find((item) => item.fieldName === 'packageId').initialValue = '';
        this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = [];
        this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
        this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
        const res = await getModelListOEM(brandsid, seriessid);
        if (res.resultCode === 200) {
          this.topFilterList.find((item) => item.fieldName === 'modelId').itemList = res.data.map((x) => ({ value: x.modelId, text: x.modelName }));
        }
      }
      // }
    },
    async changeModelSelect(modelId) {
      const brandsid = this.topFilterList.find((item) => item.fieldName === 'brandId').initialValue;
      const seriessid = this.topFilterList.find((item) => item.fieldName === 'seriesId').initialValue;
      // if (!brandsid || !seriessid || !modelId) {
      this.topFilterList.find((item) => item.fieldName === 'packageId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
      // } else {
      if (modelId) {
        const res = await getPackageListOEM(brandsid, seriessid, modelId);
        if (res.resultCode === 200) {
          this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = res.data.map((x) => ({ value: x.packageId, text: x.configName }));
        }
      }
      // }
    },
    async changePackageSelect(packageId) {
      const brandsid = this.topFilterList.find((item) => item.fieldName === 'brandId').initialValue;
      const seriessid = this.topFilterList.find((item) => item.fieldName === 'seriesId').initialValue;
      // if (!brandsid || !seriessid || !modelId) {
      this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
      // } else {
      if (packageId) {
        const res = await getOptionListDictOEM(packageId);
        if (res.resultCode === 200) {
          this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = res.data.map((x) => ({ value: x.optionId, text: x.optionName }));
        }
      }
      // }
    },
    async getColors() {
      const res = await getWcolorList();
      if (res.resultCode === 200) {
        this.topFilterList.find((item) => item.fieldName === 'colorId').itemList = res.data.map((x) => ({ value: x.colorId, text: x.colorName }));
      }
    },
    async getIColors() {
      const res = await getIcolorList();
      if (res.resultCode === 200) {
        this.topFilterList.find((item) => item.fieldName === 'trimColorId').itemList = res.data.map((x) => ({ value: x.colorId, text: x.colorName }));
      }
    },
    //获取装配
    async getAllOption() {
      const res = await queryAllOption();
      if (res.resultCode === 200) {
        res.data.map(x => {
          this.topFilterList.find(item => item.fieldName === 'optionId').itemList.push({ text: x.optionName, value: x.optionId });
        });
      }
    },
    //获取配置
    async getAllPackage() {
      const res = await queryAllPackage();
      if (res.resultCode === 200) {
        res.data.map(x => {
          this.topFilterList.find(item => item.fieldName === 'packageId').itemList.push({ text: x.configName, value: x.packageId });
        });
      }
    },
    //获取颜色
    async getListColor() {
      const res = await listColor();
      if (res.resultCode === 200) {
        let a = res.data;
        a.map(x => {
          this.topFilterList.find(item => item.fieldName === 'trimColorId').itemList.push({ text: x.colorName, value: x.colorId });
        });
        this.topFilterList[4].itemList = this.topFilterList.find(item => item.fieldName === 'trimColorId').itemList;
      }
    },
    //获取树形数据
    async getvehicleList() {
      let res = await getProductBrandTree();
      this.carList = res.data;
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, this.fetchParams, val);
    },
    closeDrawer(type) {
      if (1 == type) {
        this.$emit('close');
        return;
      }
      this.$emit('close', this.saveData);
    },
    selectChangeHandle(rows) {
      if (rows.length > 0) {
        this.saveData = rows;
        this.isDisabled = false;
        return;
      }
      this.isDisabled = true;
    },
    createdFrom() {
      return [
        {
          type: 'INPUT',
          label: '物料编码',
          fieldName: 'productCode',
          placeholder: '请输入'
        },
        {
          type: 'SELECT',
          label: '品牌',
          fieldName: 'brandId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changeBrandSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: 'seriesId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changeSeriesSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '车型',
          fieldName: 'modelId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changeModelSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '配置',
          fieldName: 'packageId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changePackageSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '选装',
          fieldName: 'optionId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          // type: 'INPUT',
          label: '外饰',
          // fieldName: 'colorStr',
          fieldName: 'colorId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          // type: 'INPUT',
          label: '内饰',
          fieldName: 'trimColorId',
          // fieldName: 'interiorColor',
          placeholder: '请选择',
          itemList: [],
        }
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '物料编码',
          dataIndex: 'productCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '物料描述',
          dataIndex: 'productName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '品牌',
          dataIndex: 'brandName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配置',
          dataIndex: 'configName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '选装',
          dataIndex: 'optionName',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '内饰',
          dataIndex: 'trimColorName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '外饰',
          dataIndex: 'colorName',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    }
  }
};
</script>
